import { Layout } from "antd";
import { useState } from "react";
import DatabaseList from "./DatabaseList";
import TableList from "./TableList";
import TableContent from "./TableContent";


function App() {
  const [curClientId, setCurClientId] = useState("");
  const [curDatabase, setCurDatabase] = useState("");
  const [curTable, setCurTable] = useState("");

  return (
    <Layout hasSider style={{ height: "100vh" }}>
      <Layout.Sider width={"200px"} theme="light">
        <DatabaseList onChange={(clientId, database) => {
          setCurClientId(clientId);
          setCurDatabase(database);
        }} />
      </Layout.Sider>
      <Layout.Sider width={"200px"} theme="light" style={{ borderLeft: "1px solid #e4e4e8", borderRight: "1px solid #e4e4e8" }}>
        <TableList curClientId={curClientId} curDatabase={curDatabase} onChange={table => setCurTable(table)} />
      </Layout.Sider>
      <Layout.Content>
        <TableContent curClientId={curClientId} curDatabase={curDatabase} curTable={curTable}/>
      </Layout.Content>
    </Layout>

  )
}

export default App
